<template>
  <el-input v-model="input" placeholder="Please input" />
  <el-row><el-button type="primary" @click="add">添加</el-button></el-row>
  <Add></Add>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
      <div v-for="(item, index) in list">
        <b>{{ index + 1 }}</b>
        {{ item.matter }}
        <el-button type="primary" @click="update(item._id)">修改</el-button>
        <el-button type="primary" @click="del(item._id)">删除</el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane label="已完成" name="second">
      <div v-for="(item, index) in already">
        <b>{{ index + 1 }}</b>
        {{ item.matter }}
        <el-button type="primary" @click="del(item._id)">删除</el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane label="未完成" name="third">
      <div v-for="(item, index) in un">
        <b>{{ index + 1 }}</b>
        {{ item.matter }}
        <el-button type="primary" @click="update(item._id)">修改</el-button>
        <el-button type="primary" @click="del(item._id)">删除</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import axios from "../../utils/axios";
console.log(JSON.parse(localStorage.getItem("info")).token);
export default {
  data() {
    return {
      input: "",
      list: [],
      already: [],
      un: [],
      uid: JSON.parse(localStorage.getItem("info"))._id,
      token: JSON.parse(localStorage.getItem("info")).token,
    };
  },
  methods: {
    async getList() {
      const res = await axios.post("v1/matter/get", {
        token: this.token,
        uid: this.uid,
      });
      this.list = res.list;
      this.un = res.list.filter((item) => {
        return item.state == false;
      });
      console.log(this.un);
      this.already = res.list.filter((item) => {
        return item.state == true;
      });
    },
    async add() {
      await axios.post("v1/matter/add", {
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI2M2ViMjAzODM0Y2JiMDFjZGNlODdmNDYiLCJpYXQiOjE2NzYzNzg5NjEsImV4cCI6MTQ2MzYzNzg5NjF9.xrf71AQk75nWzeZoqE4S7LSNdOmkIJSgyoVnCSolX3I",
        matter: this.input,
        uid: "63eb203834cbb01cdce87f46",
      });
      this.getList();
    },
    async del(id) {
      await axios.post("v1/matter/del", {
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI2M2ViMjAzODM0Y2JiMDFjZGNlODdmNDYiLCJpYXQiOjE2NzYzNzg5NjEsImV4cCI6MTQ2MzYzNzg5NjF9.xrf71AQk75nWzeZoqE4S7LSNdOmkIJSgyoVnCSolX3I",
        _id: id,
      });
      this.getList();
    },
    async update(id) {
      await axios.post("v1/matter/update", {
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI2M2ViMjAzODM0Y2JiMDFjZGNlODdmNDYiLCJpYXQiOjE2NzYzNzg5NjEsImV4cCI6MTQ2MzYzNzg5NjF9.xrf71AQk75nWzeZoqE4S7LSNdOmkIJSgyoVnCSolX3I",
        _id: id,
      });
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>

</style>
